<template>
  <div>
    <a-alert
      message="售后申请注意事项"
      description="提示内容"
      type="warning"
      show-icon
    />
    <a-divider />
    <s-table
      ref="table"
      size="small"
      :columns="columns"
      :data="data"
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
    >
    </s-table>
    <a-divider />
    <a-form-model
      ref="form"
      :model="form"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-model-item label="原因理由">
        <a-textarea :rows="4" placelholder="请输入原因阐述"></a-textarea>
      </a-form-model-item>
      <a-form-model-item label="上传聊天截图">
        <a-upload-dragger
          name="file"
          :multiple="true"
          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
        >
          <p class="ant-upload-drag-icon">
            <a-icon type="inbox" />
          </p>
          <p class="ant-upload-text">
            拖拽要上传的文件至上传区域
          </p>
        </a-upload-dragger>
      </a-form-model-item>
    </a-form-model>
    <a-divider/>
    <a-table
      bordered
      size="small"
      :columns="businessColumns"
      :data-source="businessData"
    >
      <template slot="title">
        <a-button size="small" icon="plus" @click="addModal">添加业务</a-button>
      </template>
    </a-table>
    <select-business v-if="businessVisible" @cancel="onCancel"></select-business>
    <a-table
      bordered
      size="small"
      :columns="paymentColumns"
      :data-source="paymentData"
    >
      <template slot="title">
        <a-button size="small" icon="plus" @click="addPayment">添加打款查询</a-button>
      </template>
    </a-table>
    <a-modal
      centered
      v-model="addVisible"
      title="添加打款信息"
      @ok="addPayment"
    >
      <a-form-model
        ref="addForm"
        :rules="paymentRules"
        :model="paymentForm"
      >
        <a-form-model-item class="form-item" label="打款类型" prop="amount">
          <a-select>
            <a-select-option :value="1">定金</a-select-option>
            <a-select-option :value="2">尾款</a-select-option>
            <a-select-option :value="3">全款</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item class="form-item" label="打款金额" prop="amount">
          <a-input-number style="width: 100%;" v-model="paymentForm.amount" type="text" />
        </a-form-model-item>
        <a-form-model-item class="form-item" label="打款方式" prop="type">
          <a-select>
            <a-select-option :value="1">支付宝转账</a-select-option>
            <a-select-option :value="2">公司微信</a-select-option>
            <a-select-option :value="3">顾问微信</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item class="form-item" label="打款时间" prop="payment_time">
          <a-date-picker
            :show-time="{ format: 'HH:mm' }"
            :value="paymentForm.payment_time"
            format="YYYY-MM-DD HH:mm"
            style="width: 100%;"
            @change="onChange"
          >
          </a-date-picker>
        </a-form-model-item>
        <a-form-model-item class="form-item" label="收款帐户" prop="receive_account_type">
          <a-select
            v-model="paymentForm.receive_account_type"
          >
            <a-select-option v-for="(item, index) in accountOpts" :key="index">{{ item }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item class="form-item" label="打款账号" prop="payment_account">
          <a-input v-model="paymentForm.payment_account" type="text" />
        </a-form-model-item>
        <a-form-model-item class="form-item" label="打款证明" prop="img">
          <a-upload
            name="file"
            list-type="picture-card"
            class="avatar-uploader"
            :show-upload-list="false"
            :action="uploadUrl"
            :headers="headers"
            @change="handleChange"
          >
            <img v-if="paymentForm.img" :src="paymentForm.img" width="100" height="100" />
            <div v-else>
              <div class="ant-upload-text">
                上传证明
              </div>
            </div>
          </a-upload>
        </a-form-model-item>
        <a-form-model-item class="form-item" label="非正常情况申请">
          <a-upload
            name="file"
          >
            <a-button size="small" type="primary" icon="upload">选择文件</a-button>
          </a-upload>
        </a-form-model-item>
        <a-form-model-item label="打款备注">
          <a-textarea v-model="paymentForm.remarks"></a-textarea>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
  import { STable } from '@/components'
  import contractColumns from '@/columns/contract'
  import storage from 'store'
  import { ACCESS_TOKEN } from '@/store/mutation-types'
  import apis from '@/api'
  import SelectBusiness from '@/views/contract/components/SelectBusiness'

  export default {
    components: {
      STable, SelectBusiness
    },
    name: 'MarketForm',
    data () {
      return {
        labelCol: { span: 4 },
        wrapperCol: { span: 20 },
        form: {},
        rules: {},
        selectedRowKeys: [],
        columns: contractColumns.business4,
        data: () => {
          return new Promise(resolve => {
            resolve({
              data: [
                {
                  business_no: 'YW20220608KQVRHZ',
                  business_name: '商标申请',
                  status: '材料待提交',
                  price: '5000.00',
                  price1: '3500.00'
                },
                {
                  business_no: 'YW20220608KQVRHZ',
                  business_name: '商标驳回',
                  status: '已提交至官方',
                  price: '2000.00',
                  price1: '500.00'
                }
              ]
            })
          })
        },
        businessColumns: contractColumns.business2,
        businessData: [],
        businessVisible: false,
        paymentColumns: contractColumns.finance2,
        paymentData: [],
        addVisible: false,
        paymentForm: {},
        paymentRules: {},
        headers: { 'Access-Token': storage.get(ACCESS_TOKEN) },
        uploadUrl: apis.Upload
      }
    },
    methods: {
      onSelectChange (selectedRowKeys) {
        this.selectedRowKeys = selectedRowKeys
      },
      addModal () {
        this.businessVisible = true
      },
      onCancel (visible) {
        this.businessVisible = visible
      },
      addPayment () {
        this.addVisible = true
      }
    }
  }
</script>

<style scoped>

</style>
